<template>
  <div class="rumor-detection-index">
    <div class="page-header">
      <h2>谣言检测系统</h2>
      <p>运用先进的AI技术，快速识别和分析各类谣言信息</p>
    </div>

    <!-- 检测统计概览 -->
    <div class="detection-stats">
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M9 12l2 2 4-4"/>
            <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.totalDetections }}</div>
          <div class="stat-label">总检测次数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.rumorsDetected }}</div>
          <div class="stat-label">谣言识别数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.accuracy }}%</div>
          <div class="stat-label">准确率</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.avgResponseTime }}ms</div>
          <div class="stat-label">平均响应时间</div>
        </div>
      </div>
    </div>

    <!-- 快速检测区域 -->
    <div class="quick-detection">
      <div class="section-header">
        <h3>快速检测</h3>
        <p>选择检测类型，快速验证信息真实性</p>
      </div>
      
      <div class="detection-types">
        <div class="detection-type-card" :class="{ active: activeDetectionType === 'text' }" @click="selectDetectionType('text')">
          <div class="card-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
              <polyline points="14,2 14,8 20,8"/>
              <line x1="16" y1="13" x2="8" y2="13"/>
              <line x1="16" y1="17" x2="8" y2="17"/>
              <polyline points="10,9 9,9 8,9"/>
            </svg>
          </div>
          <div class="card-content">
            <h4>文本检测</h4>
            <p>分析文本内容，识别虚假信息和谣言</p>
            <div class="card-stats">
              <span>已检测 {{ detectionStats.text.count }} 条</span>
              <span>准确率 {{ detectionStats.text.accuracy }}%</span>
            </div>
          </div>
          <div class="card-arrow">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 18l6-6-6-6"/>
            </svg>
          </div>
        </div>
        
        <div class="detection-type-card" :class="{ active: activeDetectionType === 'image' }" @click="selectDetectionType('image')">
          <div class="card-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
              <circle cx="8.5" cy="8.5" r="1.5"/>
              <polyline points="21,15 16,10 5,21"/>
            </svg>
          </div>
          <div class="card-content">
            <h4>图像检测</h4>
            <p>检测图片真实性，识别PS篡改和假图</p>
            <div class="card-stats">
              <span>已检测 {{ detectionStats.image.count }} 张</span>
              <span>准确率 {{ detectionStats.image.accuracy }}%</span>
            </div>
          </div>
          <div class="card-arrow">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 18l6-6-6-6"/>
            </svg>
          </div>
        </div>
        
        <div class="detection-type-card" :class="{ active: activeDetectionType === 'combined' }" @click="selectDetectionType('combined')">
          <div class="card-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
              <polyline points="3.27,6.96 12,12.01 20.73,6.96"/>
              <line x1="12" y1="22.08" x2="12" y2="12"/>
            </svg>
          </div>
          <div class="card-content">
            <h4>综合分析</h4>
            <p>结合文本和图像进行全面分析</p>
            <div class="card-stats">
              <span>已检测 {{ detectionStats.combined.count }} 次</span>
              <span>准确率 {{ detectionStats.combined.accuracy }}%</span>
            </div>
          </div>
          <div class="card-arrow">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 18l6-6-6-6"/>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 检测输入区域 -->
    <div v-if="activeDetectionType" class="detection-input-section">
      <div class="section-header">
        <h3>{{ getDetectionTitle(activeDetectionType) }}</h3>
        <button class="btn btn-secondary" @click="clearDetection">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6L6 18"/>
            <path d="M6 6l12 12"/>
          </svg>
          清空
        </button>
        <button v-if="!showRecentResults" class="btn btn-outline" @click="showRecentResults = true">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M1 4v6h6"/>
            <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
          </svg>
          显示历史结果
        </button>
      </div>

      <!-- 文本检测输入 -->
      <div v-if="activeDetectionType === 'text'" class="text-detection-input">
        <textarea 
          v-model="textInput" 
          placeholder="请输入需要检测的文本内容..."
          rows="6"
          class="detection-textarea"
        ></textarea>
        <div class="input-meta">
          <span class="char-count">{{ textInput.length }} 字符</span>
        </div>
      </div>

      <!-- 图像检测输入 -->
      <div v-if="activeDetectionType === 'image'" class="image-detection-input">
        <div class="image-upload-area" @drop="handleDrop" @dragover.prevent @dragenter.prevent>
          <input 
            type="file" 
            ref="imageInput"
            @change="handleImageUpload"
            accept="image/*"
            multiple
            style="display: none"
          />
          
          <div v-if="!uploadedImages.length" class="upload-placeholder" @click="$refs.imageInput.click()">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
              <circle cx="8.5" cy="8.5" r="1.5"/>
              <polyline points="21,15 16,10 5,21"/>
            </svg>
            <p>点击或拖拽图片到此处</p>
            <p class="upload-hint">支持 JPG、PNG、GIF 格式，最大 10MB</p>
          </div>

          <div v-else class="uploaded-images">
            <div v-for="(image, index) in uploadedImages" :key="index" class="image-item">
              <img :src="image.url" :alt="image.name" />
              <div class="image-overlay">
                <div class="image-info">
                  <span class="image-name">{{ image.name }}</span>
                  <span class="image-size">{{ formatFileSize(image.size) }}</span>
                </div>
                <button @click="removeImage(index)" class="remove-btn">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M18 6L6 18"/>
                    <path d="M6 6l12 12"/>
                  </svg>
                </button>
              </div>
            </div>
            <div class="add-more-btn" @click="$refs.imageInput.click()">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 5v14"/>
                <path d="M5 12h14"/>
              </svg>
              <span>添加更多</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 综合分析输入 -->
      <div v-if="activeDetectionType === 'combined'" class="combined-detection-input">
        <div class="combined-input-grid">
          <div class="input-section">
            <h4>文本内容</h4>
            <textarea 
              v-model="combinedTextInput" 
              placeholder="请输入需要检测的文本内容..."
              rows="4"
              class="detection-textarea"
            ></textarea>
          </div>
          <div class="input-section">
            <h4>图像内容</h4>
            <div class="combined-image-upload" @click="$refs.combinedImageInput.click()">
              <input 
                type="file" 
                ref="combinedImageInput"
                @change="handleCombinedImageUpload"
                accept="image/*"
                style="display: none"
              />
              <div v-if="!combinedImage" class="upload-placeholder-small">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                  <circle cx="8.5" cy="8.5" r="1.5"/>
                  <polyline points="21,15 16,10 5,21"/>
                </svg>
                <p>点击上传图片</p>
              </div>
              <div v-else class="uploaded-image-preview">
                <img :src="combinedImage.url" :alt="combinedImage.name" />
                <div class="image-info">
                  <span>{{ combinedImage.name }}</span>
                  <button @click.stop="removeCombinedImage" class="remove-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M18 6L6 18"/>
                      <path d="M6 6l12 12"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 检测按钮 -->
      <div class="detection-actions">
        <button 
          class="btn btn-primary" 
          @click="startDetection"
          :disabled="!canDetect || isDetecting"
        >
          <svg v-if="isDetecting" class="spinning" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
            <path d="M21 3v5h-5"/>
          </svg>
          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M9 12l2 2 4-4"/>
            <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z"/>
          </svg>
          {{ isDetecting ? '检测中...' : '开始检测' }}
        </button>
      </div>

      <!-- 检测进度 -->
      <div v-if="isDetecting" class="detection-progress">
        <div class="progress-header">
          <h4>{{ currentDetectionStep }}</h4>
          <span class="progress-percentage">{{ detectionProgress }}%</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: detectionProgress + '%' }"></div>
        </div>
        <div class="progress-steps">
          <div 
            v-for="(step, index) in detectionSteps" 
            :key="step.id"
            class="step-item"
            :class="{ 
              'completed': index < Math.floor(detectionProgress / 20), 
              'active': index === Math.floor(detectionProgress / 20),
              'pending': index > Math.floor(detectionProgress / 20)
            }"
          >
            <div class="step-indicator">
              <svg v-if="index < Math.floor(detectionProgress / 20)" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 12l2 2 4-4"/>
              </svg>
              <div v-else-if="index === Math.floor(detectionProgress / 20)" class="step-spinner"></div>
              <div v-else class="step-dot"></div>
            </div>
            <div class="step-info">
              <span class="step-name">{{ step.name }}</span>
              <span class="step-desc">{{ step.description }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 检测结果 -->
      <div v-if="detectionResult" class="detection-result">
        <div class="result-header">
          <h4>检测结果</h4>
          <button class="btn btn-secondary btn-sm" @click="clearResult">清除结果</button>
        </div>
        
        <div class="result-card" :class="detectionResult.status">
          <div class="result-icon">
            <svg v-if="detectionResult.status === 'rumor'" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
              <line x1="12" y1="9" x2="12" y2="13"/>
              <line x1="12" y1="17" x2="12.01" y2="17"/>
            </svg>
            <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
            </svg>
          </div>
          <div class="result-content">
            <h5>{{ detectionResult.title }}</h5>
            <p>{{ detectionResult.description }}</p>
            <div class="result-confidence">
              <span>可信度: {{ detectionResult.confidence }}%</span>
              <div class="confidence-bar">
                <div class="confidence-fill" :style="{ width: detectionResult.confidence + '%' }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新检测结果 -->
    <div v-if="showRecentResults" class="recent-detections">
      <div class="section-header">
        <h3>最新检测结果</h3>
        <button class="btn btn-text" @click="viewAllDetections">查看全部</button>
      </div>
      
      <div class="detection-results">
        <div 
          v-for="result in recentResults" 
          :key="result.id"
          class="result-card"
          @click="viewDetectionDetail(result)"
        >
          <div class="result-header">
            <div class="result-type">
              <span class="type-badge" :class="result.type">
                {{ getTypeLabel(result.type) }}
              </span>
              <span class="result-time">{{ formatTime(result.timestamp) }}</span>
            </div>
            <div class="result-confidence">
              <div class="confidence-bar">
                <div 
                  class="confidence-fill" 
                  :style="{ width: result.confidence + '%' }"
                ></div>
              </div>
              <span>{{ result.confidence }}%</span>
            </div>
          </div>
          
          <div class="result-content">
            <div class="result-text">{{ result.content }}</div>
            <div class="result-conclusion">
              <span class="conclusion-label" :class="result.conclusion">
                {{ getConclusionLabel(result.conclusion) }}
              </span>
              <span class="result-source">来源：{{ result.source }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 热点谣言预警 -->
    <div class="hot-rumors">
      <div class="section-header">
        <h3>热点谣言预警</h3>
        <button class="btn btn-text" @click="viewAllRumors">查看更多</button>
      </div>
      
      <div class="rumors-list">
        <div 
          v-for="rumor in hotRumors" 
          :key="rumor.id"
          class="rumor-item"
        >
          <div class="rumor-indicator">
            <div class="indicator-dot" :class="rumor.level"></div>
          </div>
          <div class="rumor-content">
            <div class="rumor-title">{{ rumor.title }}</div>
            <div class="rumor-description">{{ rumor.description }}</div>
            <div class="rumor-meta">
              <span class="rumor-category">{{ rumor.category }}</span>
              <span class="rumor-date">{{ formatDate(rumor.date) }}</span>
              <span class="rumor-spread">传播范围：{{ rumor.spread }}</span>
            </div>
          </div>
          <div class="rumor-actions">
            <button class="btn btn-link" @click="viewRumorDetail(rumor)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
              详情
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 检测知识库 -->
    <div class="knowledge-base">
      <div class="section-header">
        <h3>检测知识库</h3>
        <button class="btn btn-text" @click="viewKnowledgeBase">查看全部</button>
      </div>
      
      <div class="knowledge-grid">
        <div 
          v-for="knowledge in knowledgeItems" 
          :key="knowledge.id"
          class="knowledge-card"
          @click="viewKnowledgeDetail(knowledge)"
        >
          <div class="knowledge-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
            </svg>
          </div>
          <div class="knowledge-content">
            <h4>{{ knowledge.title }}</h4>
            <p>{{ knowledge.description }}</p>
            <div class="knowledge-meta">
              <span class="knowledge-category">{{ knowledge.category }}</span>
              <span class="knowledge-views">{{ knowledge.views }} 次阅读</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 统计数据
const stats = ref({
  totalDetections: 15678,
  rumorsDetected: 1234,
  accuracy: 96.8,
  avgResponseTime: 120
})

// 各类型检测统计
const detectionStats = ref({
  text: {
    count: 8765,
    accuracy: 97.2
  },
  image: {
    count: 4321,
    accuracy: 95.8
  },
  combined: {
    count: 2592,
    accuracy: 98.1
  }
})

// 最新检测结果
const recentResults = ref([
  {
    id: 1,
    type: 'text',
    content: '某地发现新型病毒，传播速度极快，政府紧急封锁...',
    confidence: 95,
    conclusion: 'rumor',
    source: '微信群聊',
    timestamp: '2024-01-20 15:30:00'
  },
  {
    id: 2,
    type: 'image',
    content: '网传某明星在机场的照片涉嫌PS造假...',
    confidence: 87,
    conclusion: 'fake',
    source: '微博',
    timestamp: '2024-01-20 14:45:00'
  },
  {
    id: 3,
    type: 'combined',
    content: '关于某公司裁员的传言，结合文本和图片分析...',
    confidence: 92,
    conclusion: 'partial',
    source: '朋友圈',
    timestamp: '2024-01-20 13:20:00'
  },
  {
    id: 4,
    type: 'text',
    content: '网传某食品添加剂致癌，专家辟谣...',
    confidence: 98,
    conclusion: 'rumor',
    source: '新闻评论',
    timestamp: '2024-01-20 12:10:00'
  }
])

// 热点谣言
const hotRumors = ref([
  {
    id: 1,
    title: '网传某地区发生重大疫情',
    description: '多个社交媒体平台出现相关传言，经核实为虚假信息',
    category: '健康医疗',
    level: 'high',
    spread: '全国范围',
    date: '2024-01-20'
  },
  {
    id: 2,
    title: '某品牌食品安全问题传言',
    description: '网传某知名品牌产品存在质量问题，官方已发布澄清声明',
    category: '食品安全',
    level: 'medium',
    spread: '华东地区',
    date: '2024-01-19'
  },
  {
    id: 3,
    title: '教育政策变化谣言',
    description: '关于高考改革的不实信息在家长群中传播',
    category: '教育政策',
    level: 'low',
    spread: '部分城市',
    date: '2024-01-18'
  }
])

// 知识库条目
const knowledgeItems = ref([
  {
    id: 1,
    title: '如何识别图片篡改',
    description: '学习图像检测的基本技巧和方法',
    category: '技术指南',
    views: 1234
  },
  {
    id: 2,
    title: '常见谣言传播模式',
    description: '了解谣言的传播特点和识别方法',
    category: '知识普及',
    views: 2345
  },
  {
    id: 3,
    title: '权威信息源查证',
    description: '掌握信息查证的可靠渠道和方法',
    category: '查证方法',
    views: 1876
  },
  {
    id: 4,
    title: '社交媒体辟谣指南',
    description: '在社交媒体上有效辟谣的方法和策略',
    category: '实用技巧',
    views: 987
  }
])

// 检测相关状态
const activeDetectionType = ref(null)
const isDetecting = ref(false)
const detectionResult = ref(null)
const showRecentResults = ref(true) // 控制是否显示最新检测结果

// 检测进度相关
const detectionProgress = ref(0)
const currentDetectionStep = ref('')
const detectionSteps = ref([])

// 文本检测相关
const textInput = ref('')

// 图像检测相关
const uploadedImages = ref([])

// 综合分析相关
const combinedTextInput = ref('')
const combinedImage = ref(null)

// 检测能力计算
const canDetect = computed(() => {
  if (activeDetectionType.value === 'text') {
    return textInput.value.trim().length > 0
  } else if (activeDetectionType.value === 'image') {
    return uploadedImages.value.length > 0
  } else if (activeDetectionType.value === 'combined') {
    return combinedTextInput.value.trim().length > 0 || combinedImage.value
  }
  return false
})

// 选择检测类型
const selectDetectionType = (type) => {
  activeDetectionType.value = type
  clearDetection()
}

// 获取检测标题
const getDetectionTitle = (type) => {
  const titles = {
    text: '文本谣言检测',
    image: '图像谣言检测',
    combined: '综合谣言分析'
  }
  return titles[type] || '检测'
}

// 清空检测
const clearDetection = () => {
  textInput.value = ''
  uploadedImages.value = []
  combinedTextInput.value = ''
  combinedImage.value = null
  detectionResult.value = null
  isDetecting.value = false
  showRecentResults.value = true // 重新显示最新检测结果
  
  // 重置进度相关状态
  detectionProgress.value = 0
  currentDetectionStep.value = ''
  detectionSteps.value = []
}

// 清空结果
const clearResult = () => {
  detectionResult.value = null
}

// 处理图像上传
const handleImageUpload = (event) => {
  const files = Array.from(event.target.files)
  processFiles(files)
}

// 处理拖拽上传
const handleDrop = (event) => {
  event.preventDefault()
  const files = Array.from(event.dataTransfer.files)
  processFiles(files)
}

// 处理文件
const processFiles = (files) => {
  files.forEach(file => {
    if (file.type.startsWith('image/')) {
      if (file.size > 10 * 1024 * 1024) {
        alert('图片大小不能超过 10MB')
        return
      }
      
      const reader = new FileReader()
      reader.onload = (e) => {
        uploadedImages.value.push({
          name: file.name,
          size: file.size,
          url: e.target.result
        })
      }
      reader.readAsDataURL(file)
    }
  })
}

// 移除图像
const removeImage = (index) => {
  uploadedImages.value.splice(index, 1)
}

// 处理综合分析图像上传
const handleCombinedImageUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    if (file.size > 10 * 1024 * 1024) {
      alert('图片大小不能超过 10MB')
      return
    }
    
    const reader = new FileReader()
    reader.onload = (e) => {
      combinedImage.value = {
        name: file.name,
        size: file.size,
        url: e.target.result
      }
    }
    reader.readAsDataURL(file)
  }
}

// 移除综合分析图像
const removeCombinedImage = () => {
  combinedImage.value = null
}

// 开始检测
const startDetection = async () => {
  if (!canDetect.value) return
  
  isDetecting.value = true
  detectionResult.value = null
  showRecentResults.value = false // 隐藏最新检测结果
  
  // 设置检测步骤
  setupDetectionSteps()
  
  // 执行检测步骤
  await executeDetectionSteps()
  
  let result = null
  
  if (activeDetectionType.value === 'text') {
    result = performTextDetection()
  } else if (activeDetectionType.value === 'image') {
    result = performImageDetection()
  } else if (activeDetectionType.value === 'combined') {
    result = performCombinedDetection()
  }
  
  detectionResult.value = result
  isDetecting.value = false
  
  // 重置进度
  detectionProgress.value = 0
  currentDetectionStep.value = ''
  detectionSteps.value = []
}

// 设置检测步骤
const setupDetectionSteps = () => {
  if (activeDetectionType.value === 'text') {
    detectionSteps.value = [
      { id: 1, name: '文本预处理', description: '清理和格式化文本内容', duration: 800 },
      { id: 2, name: '语义分析', description: '分析文本语义和情感倾向', duration: 1200 },
      { id: 3, name: '特征提取', description: '提取关键特征和模式', duration: 1000 },
      { id: 4, name: '模型推理', description: '运行AI模型进行判断', duration: 1500 },
      { id: 5, name: '结果生成', description: '生成检测结果和可信度评分', duration: 500 }
    ]
  } else if (activeDetectionType.value === 'image') {
    detectionSteps.value = [
      { id: 1, name: '图像预处理', description: '优化图像质量和格式', duration: 1000 },
      { id: 2, name: '特征检测', description: '检测图像中的关键特征', duration: 1500 },
      { id: 3, name: '篡改分析', description: '分析图像是否被篡改或伪造', duration: 1800 },
      { id: 4, name: '深度学习推理', description: '运行深度学习模型进行分析', duration: 2000 },
      { id: 5, name: '置信度计算', description: '计算检测结果的置信度', duration: 700 }
    ]
  } else if (activeDetectionType.value === 'combined') {
    detectionSteps.value = [
      { id: 1, name: '多模态预处理', description: '同时处理文本和图像数据', duration: 1200 },
      { id: 2, name: '特征融合', description: '融合文本和图像的特征信息', duration: 1500 },
      { id: 3, name: '关联性分析', description: '分析文本与图像的关联性', duration: 1800 },
      { id: 4, name: '综合推理', description: '综合多种模态信息进行推理', duration: 2200 },
      { id: 5, name: '结果整合', description: '整合分析结果并生成最终报告', duration: 800 }
    ]
  }
}

// 执行检测步骤
const executeDetectionSteps = async () => {
  const totalSteps = detectionSteps.value.length
  let completedSteps = 0
  
  for (const step of detectionSteps.value) {
    currentDetectionStep.value = step.name
    
    // 模拟步骤执行时间
    await new Promise(resolve => setTimeout(resolve, step.duration))
    
    completedSteps++
    detectionProgress.value = Math.round((completedSteps / totalSteps) * 100)
  }
  
  currentDetectionStep.value = '检测完成'
}

// 执行文本检测
const performTextDetection = () => {
  const textLength = textInput.value.length
  const isRumor = textLength >= 15
  const confidence = isRumor ? 85 + Math.random() * 10 : 80 + Math.random() * 10
  
  return {
    status: isRumor ? 'rumor' : 'safe',
    title: isRumor ? '检测到谣言内容' : '内容相对可信',
    description: isRumor ? 
      '经过AI模型深度分析，该文本包含多个谣言特征，建议谨慎对待。' :
      '经过AI模型分析，该文本内容相对可信，未发现明显谣言特征。',
    confidence: Math.round(confidence)
  }
}

// 执行图像检测
const performImageDetection = () => {
  const hasRumorImage = uploadedImages.value.some(img => img.name.length >= 15)
  const confidence = hasRumorImage ? 85 + Math.random() * 10 : 80 + Math.random() * 10
  
  return {
    status: hasRumorImage ? 'rumor' : 'safe',
    title: hasRumorImage ? '检测到谣言图片' : '图片相对可信',
    description: hasRumorImage ? 
      '经过AI模型深度分析，检测到图片存在谣言特征，建议谨慎对待。' :
      '经过AI模型分析，图片内容相对可信，未发现明显谣言特征。',
    confidence: Math.round(confidence)
  }
}

// 执行综合检测
const performCombinedDetection = () => {
  const textLength = combinedTextInput.value.length
  const isTextRumor = textLength >= 15
  const isImageRumor = combinedImage.value && combinedImage.value.name.length >= 15
  const isRumor = isTextRumor || isImageRumor
  
  const confidence = isRumor ? 85 + Math.random() * 10 : 80 + Math.random() * 10
  
  return {
    status: isRumor ? 'rumor' : 'safe',
    title: isRumor ? '检测到谣言内容' : '内容相对可信',
    description: isRumor ? 
      '经过AI模型综合分析，检测到内容存在谣言特征，建议谨慎对待。' :
      '经过AI模型综合分析，内容相对可信，未发现明显谣言特征。',
    confidence: Math.round(confidence)
  }
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 查看所有检测结果
const viewAllDetections = () => {
  router.push('/user/profile/detection-history')
}

// 查看检测详情
const viewDetectionDetail = (result) => {
  router.push(`/user/rumor-detection/result/${result.id}`)
}

// 查看所有谣言
const viewAllRumors = () => {
  router.push('/user/knowledge-center/rumors')
}

// 查看谣言详情
const viewRumorDetail = (rumor) => {
  console.log('查看谣言详情:', rumor)
  // 这里可以打开详情对话框或跳转到详情页
}

// 查看知识库
const viewKnowledgeBase = () => {
  router.push('/user/knowledge-center')
}

// 查看知识详情
const viewKnowledgeDetail = (knowledge) => {
  router.push(`/user/knowledge-center/article/${knowledge.id}`)
}

// 获取类型标签
const getTypeLabel = (type) => {
  const labels = {
    text: '文本',
    image: '图像',
    combined: '综合'
  }
  return labels[type] || type
}

// 获取结论标签
const getConclusionLabel = (conclusion) => {
  const labels = {
    rumor: '谣言',
    fake: '虚假',
    partial: '部分属实',
    true: '属实'
  }
  return labels[conclusion] || conclusion
}

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) {
    return '刚刚'
  } else if (diff < 3600000) {
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) {
    return `${Math.floor(diff / 3600000)}小时前`
  } else {
    return date.toLocaleDateString()
  }
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.rumor-detection-index {
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #1e3c72;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 16px;
}

/* 统计概览 */
.detection-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #1e3c72, #2d4a87);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #1e3c72;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

/* 区域样式 */
.quick-detection,
.recent-detections,
.hot-rumors,
.knowledge-base {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f5f5f5;
}

.section-header h3 {
  margin: 0;
  color: #1e3c72;
  font-size: 20px;
  font-weight: 600;
}

.section-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-text {
  background: transparent;
  color: #1e3c72;
  padding: 4px 8px;
}

.btn-text:hover {
  background: rgba(30, 60, 114, 0.1);
}

.btn-link {
  background: transparent;
  color: #1e3c72;
  padding: 4px;
}

.btn-link:hover {
  background: rgba(30, 60, 114, 0.1);
}

/* 检测类型卡片 */
.detection-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.detection-type-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.detection-type-card:hover {
  background: white;
  border-color: #1e3c72;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.detection-type-card.active {
  background: white;
  border-color: #1e3c72;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #1e3c72, #2d4a87);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.card-content {
  flex: 1;
}

.card-content h4 {
  margin: 0 0 8px 0;
  color: #1e3c72;
  font-size: 18px;
  font-weight: 600;
}

.card-content p {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.card-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #999;
}

.card-arrow {
  color: #1e3c72;
  opacity: 0.7;
}

/* 检测结果 */
.detection-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-card {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.result-card:hover {
  background: white;
  border-color: #1e3c72;
  transform: translateY(-1px);
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.result-type {
  display: flex;
  align-items: center;
  gap: 12px;
}

.type-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.type-badge.text {
  background: #e3f2fd;
  color: #1976d2;
}

.type-badge.image {
  background: #e8f5e8;
  color: #388e3c;
}

.type-badge.combined {
  background: #f3e5f5;
  color: #7b1fa2;
}

.result-time {
  font-size: 12px;
  color: #999;
}

.result-confidence {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #666;
}

.confidence-bar {
  width: 60px;
  height: 4px;
  background: #e9e9e9;
  border-radius: 2px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72, #2d4a87);
  transition: width 0.3s;
}

.result-content {
  margin-bottom: 12px;
}

.result-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.result-conclusion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.conclusion-label {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.conclusion-label.rumor {
  background: #ffebee;
  color: #d32f2f;
}

.conclusion-label.fake {
  background: #fff3e0;
  color: #f57c00;
}

.conclusion-label.partial {
  background: #e8f5e8;
  color: #388e3c;
}

.conclusion-label.true {
  background: #e3f2fd;
  color: #1976d2;
}

.result-source {
  color: #999;
}

/* 热点谣言 */
.rumors-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rumor-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.rumor-indicator {
  margin-top: 4px;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.indicator-dot.high {
  background: #f44336;
}

.indicator-dot.medium {
  background: #ff9800;
}

.indicator-dot.low {
  background: #4caf50;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.rumor-content {
  flex: 1;
}

.rumor-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.rumor-description {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8px;
}

.rumor-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #999;
}

.rumor-category {
  padding: 2px 6px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 4px;
}

/* 知识库网格 */
.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.knowledge-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.knowledge-card:hover {
  background: white;
  border-color: #1e3c72;
  transform: translateY(-1px);
}

.knowledge-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1e3c72, #2d4a87);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.knowledge-content h4 {
  margin: 0 0 8px 0;
  color: #1e3c72;
  font-size: 16px;
  font-weight: 600;
}

.knowledge-content p {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.knowledge-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #999;
}

.knowledge-category {
  padding: 2px 6px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .rumor-detection-index {
    width: 90%;
  }
}

@media (max-width: 1200px) {
  .rumor-detection-index {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .rumor-detection-index {
    width: 100%;
    padding: 15px;
  }
  
  .detection-stats {
    grid-template-columns: 1fr;
  }
  
  .detection-types {
    grid-template-columns: 1fr;
  }
  
  .detection-type-card {
    flex-direction: column;
    text-align: center;
  }
  
  .card-stats {
    justify-content: center;
  }
  
  .result-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .result-conclusion {
    flex-direction: column;
    gap: 8px;
  }
  
  .rumor-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .knowledge-grid {
    grid-template-columns: 1fr;
  }
}

/* 检测输入区域 */
.detection-input-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 32px;
}

/* 检测进度 */
.detection-progress {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-top: 24px;
  border: 1px solid #e9ecef;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.progress-header h4 {
  margin: 0;
  color: #1e3c72;
  font-size: 16px;
  font-weight: 600;
}

.progress-percentage {
  font-size: 14px;
  font-weight: 600;
  color: #28a745;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72, #2d4a87);
  transition: width 0.3s ease;
}

.progress-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  transition: all 0.3s ease;
}

.step-item.completed {
  opacity: 0.8;
}

.step-item.active {
  background: rgba(30, 60, 114, 0.1);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0 -12px;
}

.step-item.pending {
  opacity: 0.5;
}

.step-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-item.completed .step-indicator {
  background: #28a745;
  color: white;
}

.step-item.active .step-indicator {
  background: #1e3c72;
  color: white;
}

.step-item.pending .step-indicator {
  background: #e9ecef;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6c757d;
}

.step-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.step-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.step-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.3;
}

.btn-primary {
  background: #1e3c72;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
}

.btn-primary:hover {
  background: #2d4a87;
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}

.btn-secondary:hover {
  background: #e9e9e9;
}

.btn-outline {
  background: transparent;
  color: #1e3c72;
  border: 2px solid #1e3c72;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
}

.btn-outline:hover {
  background: #1e3c72;
  color: white;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 文本检测输入 */
.text-detection-input {
  margin-bottom: 24px;
}

.detection-textarea {
  width: 100%;
  padding: 16px;
  border: 2px solid #e9e9e9;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s;
}

.detection-textarea:focus {
  outline: none;
  border-color: #1e3c72;
}

.input-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.char-count {
  font-size: 12px;
  color: #666;
}

/* 图像检测输入 */
.image-detection-input {
  margin-bottom: 24px;
}

.image-upload-area {
  border: 2px dashed #e9e9e9;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}

.image-upload-area:hover {
  border-color: #1e3c72;
  background: rgba(30, 60, 114, 0.05);
}

.upload-placeholder {
  color: #666;
}

.upload-placeholder svg {
  color: #1e3c72;
  margin-bottom: 16px;
}

.upload-placeholder p {
  margin: 8px 0;
}

.upload-hint {
  font-size: 12px;
  color: #999;
}

.uploaded-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  align-items: start;
}

.image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
}

.image-item:hover .image-overlay {
  opacity: 1;
}

.image-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.image-name {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-size {
  font-size: 10px;
  opacity: 0.8;
}

.remove-btn {
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s;
}

.remove-btn:hover {
  background: #cc0000;
}

.add-more-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 2px dashed #ccc;
  border-radius: 8px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 150px;
}

.add-more-btn:hover {
  border-color: #1e3c72;
  color: #1e3c72;
}

.add-more-btn span {
  margin-top: 8px;
  font-size: 14px;
}

/* 综合分析输入 */
.combined-detection-input {
  margin-bottom: 24px;
}

.combined-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.input-section h4 {
  margin: 0 0 16px 0;
  color: #1e3c72;
  font-size: 16px;
  font-weight: 600;
}

.combined-image-upload {
  border: 2px dashed #e9e9e9;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.combined-image-upload:hover {
  border-color: #1e3c72;
  background: rgba(30, 60, 114, 0.05);
}

.upload-placeholder-small {
  color: #666;
}

.upload-placeholder-small svg {
  color: #1e3c72;
  margin-bottom: 8px;
}

.upload-placeholder-small p {
  margin: 8px 0;
  font-size: 14px;
}

.uploaded-image-preview {
  width: 100%;
  height: 100%;
  position: relative;
}

.uploaded-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.uploaded-image-preview .image-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.uploaded-image-preview .image-info span {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 检测按钮 */
.detection-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 24px;
}

/* 检测结果 */
.detection-result {
  border-top: 1px solid #e9e9e9;
  padding-top: 24px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.result-header h4 {
  margin: 0;
  color: #1e3c72;
  font-size: 18px;
  font-weight: 600;
}

.result-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9e9e9;
}

.result-card.rumor {
  background: #fff5f5;
  border-color: #ffcdd2;
}

.result-card.safe {
  background: #f1f8e9;
  border-color: #c8e6c9;
}

.result-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.result-card.rumor .result-icon {
  background: #ffebee;
  color: #d32f2f;
}

.result-card.safe .result-icon {
  background: #e8f5e8;
  color: #388e3c;
}

.result-content {
  flex: 1;
}

.result-content h5 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.result-content p {
  margin: 0 0 16px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.result-confidence {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #666;
}

.result-confidence .confidence-bar {
  flex: 1;
  height: 6px;
  background: #e9e9e9;
  border-radius: 3px;
  overflow: hidden;
}

.result-confidence .confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72, #2d4a87);
  transition: width 0.3s;
}

/* 响应式设计 - 新增检测界面 */
@media (max-width: 768px) {
  .combined-input-grid {
    grid-template-columns: 1fr;
  }
  
  .uploaded-images {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  
  .detection-actions {
    flex-direction: column;
  }
  
  .result-card {
    flex-direction: column;
    text-align: center;
  }
  
  .result-confidence {
    flex-direction: column;
    align-items: stretch;
  }
  
  .detection-progress {
    padding: 16px;
  }
  
  .progress-steps {
    gap: 8px;
  }
  
  .step-item {
    padding: 6px 0;
  }
  
  .step-item.active {
    padding: 6px 8px;
    margin: 0 -8px;
  }
  
  .step-name {
    font-size: 13px;
  }
  
  .step-desc {
    font-size: 11px;
  }
}
</style> 